<!-- blog.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>博客管理系统</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    :root {
      --primary-color: #3498db;
      --secondary-color: #2ecc71;
      --danger-color: #e74c3c;
      --dark-color: #34495e;
      --light-color: #ecf0f1;
      --border-color: #ddd;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f5f7fa;
      color: #333;
    }

   /* .main-content {
      margin-left: 250px;
      transition: all 0.3s;
      padding: 20px;
    }*/

    .collapsed .main-content {
      margin-left: 70px;
    }

    .top-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: white;
      padding: 15px 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      margin-bottom: 20px;
    }

    #toggleSidebar {
      background-color: var(--primary-color);
      border: none;
      padding: 8px 12px;
      border-radius: 6px;
      color: white;
      cursor: pointer;
      transition: all 0.3s;
    }

    #toggleSidebar:hover {
      background-color: #2980b9;
      transform: scale(1.05);
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .user-info img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--primary-color);
    }

    .user-info span {
      font-weight: 600;
      color: var(--dark-color);
    }

    .card {
      border: none;
      border-radius: 10px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      overflow: hidden;
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
      background-color: white;
      border-bottom: 1px solid var(--border-color);
    }

    .card-header h3 {
      margin: 0;
      color: var(--dark-color);
      font-weight: 600;
    }

    .card-header .btn {
      margin-left: 10px;
      border-radius: 6px;
      font-weight: 500;
      padding: 8px 15px;
    }

    .card-header .btn-primary {
      background-color: var(--primary-color);
      border-color: var(--primary-color);
    }

    .card-header .btn-secondary {
      background-color: var(--dark-color);
      border-color: var(--dark-color);
    }

    .card-body {
      padding: 0;
    }

    .table {
      margin-bottom: 0;
    }

    .table thead th {
      background-color: #f8f9fa;
      border-bottom: 2px solid var(--border-color);
      font-weight: 600;
      color: var(--dark-color);
      padding: 12px 15px;
    }

    .table tbody td {
      padding: 12px 15px;
      vertical-align: middle;
      border-top: 1px solid var(--border-color);
    }

    .table tbody tr:hover {
      background-color: rgba(52, 152, 219, 0.05);
    }

    .badge {
      padding: 5px 10px;
      border-radius: 20px;
      font-weight: 500;
      font-size: 0.8rem;
    }

    .badge-success {
      background-color: var(--secondary-color);
    }

    .btn-sm {
      padding: 5px 10px;
      border-radius: 4px;
      font-size: 0.85rem;
    }

    .btn-primary.btn-sm {
      background-color: var(--primary-color);
      border-color: var(--primary-color);
    }

    .btn-danger.btn-sm {
      background-color: var(--danger-color);
      border-color: var(--danger-color);
    }

    .btn-sm i {
      font-size: 0.8rem;
    }

    /* 模态框样式 */
    .modal-lg {
      max-width: 900px;
    }

    .modal-header {
      border-bottom: 1px solid var(--border-color);
      padding: 15px 20px;
    }

    .modal-title {
      font-weight: 600;
      color: var(--dark-color);
    }

    .modal-body {
      padding: 20px;
    }

    .modal-footer {
      border-top: 1px solid var(--border-color);
      padding: 15px 20px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-control {
      border-radius: 6px;
      border: 1px solid var(--border-color);
      padding: 10px 15px;
    }

    .form-control:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
    }

    .editor-toolbar {
      display: flex;
      gap: 5px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }

    .editor-toolbar .btn {
      padding: 8px 12px;
      background-color: #f8f9fa;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      color: var(--dark-color);
      transition: all 0.2s;
    }

    .editor-toolbar .btn:hover {
      background-color: var(--primary-color);
      color: white;
      border-color: var(--primary-color);
    }

    textarea.form-control {
      min-height: 200px;
    }

    .form-check {
      display: flex;
      align-items: center;
    }

    .form-check-input {
      margin-right: 10px;
    }

    .btn-success {
      background-color: var(--secondary-color);
      border-color: var(--secondary-color);
    }

    /* 响应式设计 */
    @media (max-width: 992px) {
      .main-content {
        margin-left: 0;
      }

      .collapsed .main-content {
        margin-left: 0;
      }

      .card-header {
        flex-direction: column;
        align-items: flex-start;
      }

      .card-header .btn {
        margin-top: 10px;
        margin-left: 0;
      }
    }

    @media (max-width: 768px) {
      .table-responsive {
        overflow-x: auto;
      }

      .user-info span {
        display: none;
      }
    }
  </style>
</head>
<body>
<div class="main-content">
  <!--<div class="top-nav">
    <div>
      <button class="btn btn-primary" id="toggleSidebar">
        <i class="fas fa-bars"></i> 菜单
      </button>
    </div>
    <div class="user-info">
      <img src="https://via.placeholder.com/40" alt="用户头像">
      <span>北极星</span>
    </div>
  </div>-->

  <div class="card">
    <div class="card-header">
      <h3>博客管理</h3>
      <div>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPostModal">
          <i class="fas fa-plus"></i> 添加文章
        </button>
        <button class="btn btn-secondary" id="manageCategories">
          <i class="fas fa-folder"></i> 分类管理
        </button>
      </div>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table">
          <thead>
          <tr>
            <th>标题</th>
            <th>分类</th>
            <th>作者</th>
            <th>发布日期</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>React 18新特性详解</td>
            <td>前端开发</td>
            <td>北极星</td>
            <td>2023-11-15</td>
            <td><span class="badge badge-success">已发布</span></td>
            <td>
              <button class="btn btn-sm btn-primary edit-post"><i class="fas fa-edit"></i></button>
              <button class="btn btn-sm btn-danger delete-post"><i class="fas fa-trash"></i></button>
            </td>
          </tr>
          <tr>
            <td>Node.js性能优化技巧</td>
            <td>后端开发</td>
            <td>北极星</td>
            <td>2023-10-28</td>
            <td><span class="badge badge-success">已发布</span></td>
            <td>
              <button class="btn btn-sm btn-primary edit-post"><i class="fas fa-edit"></i></button>
              <button class="btn btn-sm btn-danger delete-post"><i class="fas fa-trash"></i></button>
            </td>
          </tr>
          <tr>
            <td>数据库设计最佳实践</td>
            <td>数据库</td>
            <td>北极星</td>
            <td>2023-09-10</td>
            <td><span class="badge badge-success">已发布</span></td>
            <td>
              <button class="btn btn-sm btn-primary edit-post"><i class="fas fa-edit"></i></button>
              <button class="btn btn-sm btn-danger delete-post"><i class="fas fa-trash"></i></button>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- 添加文章模态框 -->
<div class="modal fade" id="addPostModal" tabindex="-1" aria-labelledby="addPostModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addPostModalLabel">添加新文章</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="postForm">
          <div class="form-group">
            <label>文章标题</label>
            <input type="text" class="form-control" id="postTitle" required>
          </div>
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label>分类</label>
                <select class="form-control" id="postCategory" required>
                  <option value="">选择分类</option>
                  <option value="frontend">前端开发</option>
                  <option value="backend">后端开发</option>
                  <option value="database">数据库</option>
                  <option value="other">其他</option>
                </select>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>标签</label>
                <input type="text" class="form-control" id="postTags" placeholder="多个标签用逗号分隔">
              </div>
            </div>
          </div>
          <div class="form-group">
            <label>封面图片</label>
            <input type="file" class="form-control" id="postCover" accept="image/*">
            <small class="text-muted">建议尺寸：1200x630像素</small>
          </div>
          <div class="form-group">
            <label>文章内容</label>
            <div class="editor-toolbar">
              <button type="button" class="btn" data-command="bold"><i class="fas fa-bold"></i></button>
              <button type="button" class="btn" data-command="italic"><i class="fas fa-italic"></i></button>
              <button type="button" class="btn" data-command="underline"><i class="fas fa-underline"></i></button>
              <button type="button" class="btn" data-command="insertUnorderedList"><i class="fas fa-list-ul"></i></button>
              <button type="button" class="btn" data-command="insertOrderedList"><i class="fas fa-list-ol"></i></button>
              <button type="button" class="btn" data-command="createLink"><i class="fas fa-link"></i></button>
              <button type="button" class="btn" data-command="insertImage"><i class="fas fa-image"></i></button>
              <button type="button" class="btn" data-command="insertHTML"><i class="fas fa-code"></i></button>
            </div>
            <textarea class="form-control" id="postContent" rows="10" placeholder="在这里输入文章内容..."></textarea>
          </div>
          <div class="form-group">
            <label>摘要</label>
            <textarea class="form-control" id="postExcerpt" rows="3" placeholder="文章摘要，用于列表页显示"></textarea>
          </div>
          <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="publishNow">
            <label class="form-check-label" for="publishNow">立即发布</label>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="saveDraft">保存草稿</button>
        <button type="button" class="btn btn-success" id="publishPost">发布文章</button>
      </div>
    </div>
  </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">确认删除</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>您确定要删除这篇文章吗？此操作无法撤销。</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-danger" id="confirmDelete">确认删除</button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  // 切换侧边栏
  document.getElementById('toggleSidebar').addEventListener('click', function() {
    document.body.classList.toggle('collapsed');
  });

  // 编辑器工具栏功能
  document.querySelectorAll('.editor-toolbar .btn').forEach(button => {
    button.addEventListener('click', function() {
      const command = this.getAttribute('data-command');
      const contentField = document.getElementById('postContent');

      if (command === 'createLink') {
        const url = prompt('输入链接URL:');
        if (url) {
          document.execCommand(command, false, url);
        }
      } else if (command === 'insertImage') {
        const url = prompt('输入图片URL:');
        if (url) {
          document.execCommand(command, false, url);
        }
      } else if (command === 'insertHTML') {
        const html = prompt('输入HTML代码:');
        if (html) {
          document.execCommand(command, false, html);
        }
      } else {
        document.execCommand(command, false, null);
      }

      contentField.focus();
    });
  });

  // 文章操作
  let currentPostId = null;

  // 编辑文章
  document.querySelectorAll('.edit-post').forEach(btn => {
    btn.addEventListener('click', function() {
      const row = this.closest('tr');
      const title = row.cells[0].textContent;
      const category = row.cells[1].textContent;

      // 填充表单
      document.getElementById('postTitle').value = title;
      document.getElementById('postCategory').value = category.toLowerCase().replace(' ', '');

      // 显示模态框
      const modal = new bootstrap.Modal(document.getElementById('addPostModal'));
      modal.show();

      // 更新模态框标题
      document.getElementById('addPostModalLabel').textContent = '编辑文章';
    });
  });

  // 删除文章
  document.querySelectorAll('.delete-post').forEach(btn => {
    btn.addEventListener('click', function() {
      const row = this.closest('tr');
      currentPostId = row.rowIndex; // 在实际应用中应该是文章ID

      const modal = new bootstrap.Modal(document.getElementById('confirmDeleteModal'));
      modal.show();
    });
  });

  // 确认删除
  document.getElementById('confirmDelete').addEventListener('click', function() {
    if (currentPostId !== null) {
      // 在实际应用中这里应该发送AJAX请求删除文章
      alert(`文章ID ${currentPostId} 已删除`);

      // 关闭模态框
      const modal = bootstrap.Modal.getInstance(document.getElementById('confirmDeleteModal'));
      modal.hide();

      // 刷新页面或移除行
      location.reload();
    }
  });

  // 保存草稿
  document.getElementById('saveDraft').addEventListener('click', function() {
    if (validateForm()) {
      alert('文章已保存为草稿');
      const modal = bootstrap.Modal.getInstance(document.getElementById('addPostModal'));
      modal.hide();
    }
  });

  // 发布文章
  document.getElementById('publishPost').addEventListener('click', function() {
    if (validateForm()) {
      const isPublishNow = document.getElementById('publishNow').checked;
      if (isPublishNow) {
        alert('文章已发布');
      } else {
        alert('文章已保存为待发布');
      }
      const modal = bootstrap.Modal.getInstance(document.getElementById('addPostModal'));
      modal.hide();
    }
  });

  // 表单验证
  function validateForm() {
    const title = document.getElementById('postTitle').value;
    const category = document.getElementById('postCategory').value;
    const content = document.getElementById('postContent').value;

    if (!title) {
      alert('请输入文章标题');
      return false;
    }

    if (!category) {
      alert('请选择文章分类');
      return false;
    }

    if (!content) {
      alert('请输入文章内容');
      return false;
    }

    return true;
  }

  // 分类管理
  document.getElementById('manageCategories').addEventListener('click', function() {
    alert('分类管理功能将在后续版本中实现');
  });
</script>
</body>
</html>